<template>
  <div class="image-container">
    <ul class="image-list">
      <li v-for="(item, index) in imageList" :key="index">
        <div class="image-item" v-if="item.fileType !== 'pdf' && item.fileType !== '.pdf'">
          <el-image style="width:100%;height:100%;" :src="item.url" :preview-src-list="previewList"></el-image>
        </div>
        <a v-if="item.fileType === 'pdf' || item.fileType === 'pdf'" target="_blank" :href="item.url" class="pdf-url">{{item.fileName}}</a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'image-preview',
  props: { imageList: Array, previewList: Array },
  methods: {
    onClick ($event) {
      this.$emit('click', $event)
    }
  },
  created () {
    console.log('>>> previewList : ', this.previewList);
    console.log('>>> imageList : ', this.imageList);
  }
}
</script>
<style lang="less" scoped>
@import "../../../assets/css/common.less";
.image-container{
  width: 100%;
  box-sizing: border-box;
  padding: 25px;
  .image-list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    .image-item{
      display: inline-block;
      width: 109px;
      height: 169px;
      margin-right: 30px;
      border-radius: 20px;
      overflow: hidden;
    }
    .pdf-url{
      display: inline;
      margin-right: 30px;
    }
  }
}
</style>
